<template>
    <div style="font-size: 0.2rem">
	  <div v-if="chenload" class="padd">
			<div class="top">
				<!-- <p :class="active==-1?'blue':'gray'" @click="allclick()">全部</p>
				<p v-for='(item,index) in classarr' @click="activeclick(item.id,index)" :class="active==index?'blue':'gray'">{{item.name}}</p> -->
				<ly-tab v-model="selectedId" :items="classarr" :options="options"   @change="handleChange" id="Tab" style="color: #000;z-index: 99999;font-size: .3rem;height: .68rem;">
				</ly-tab>
			</div>
				<mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
					<div id="dataList" class="padd">
						<div class="ya" @click="xq(item)" v-for="(item,index) in tab0.list" >
							<img :src="img+item.images" alt="" class="img2">
							<div>
								<p>{{item.title}}</p>
								<p class="p1">
									<img src="../../../src/assets/img/shouye/dian.png" alt="" class="img1">
									<span>{{item.comment}}</span>
									<img src="../../../src/assets/img/shouye/yan.png" alt="" class="i">
									<span>{{item.reading}}</span>
								</p>
							</div>
						</div>
					</div>
				</mescroll-vue>
		</div>
		
        <div class="loadmore" v-else>
        	<img src="../../../src/assets/img/load.gif" alt="">
        </div>
		<Footer></Footer>
    </div>
</template>

<script>
	import Footer from '@/components/home/Footer'
	import MescrollVue from 'mescroll.js/mescroll.vue'
    export default {
		components:{
		  Footer,
		  MescrollVue
		},
        name: "Zixun",
      data(){
          return{
			imgSrc: require("../../assets/img/kongbai.png"), 
			tab0: {mescroll: null, list: [], isListInit: false}, // 全部
			tabType: 0,// 菜单类型
			chenloading:true,
			selectedId:0,
			chenload:false,
// 			a:'tabcontainer',
// 			tabcontainer:'tabcontainer',
		    active:-1,
			classarr:[
				{'name':'全部',id:''}
			],  //分类
			options: {
				activeColor: '#0287FF',
				labelKey:'name'
				// 可在这里指定labelKey为你数据里文字对应的字段名
			},
			classid:'',  //分类id
            relevarr:[],
            img:this.$store.state.img,
			count:'',
			pageSize:10,
			// page:1,
            allLoaded:false,
			id:'',
			page:1,
			mescroll: null, // mescroll实例对象
			loadzheng:true,
			noloadzheng:false,
			loadTop:'loadTop',
		}    
			
      },
      methods:{
		
			handleChange(item){
				this.page=1;
				this.id=item.id,
				this.relevarr=[],
				this.changeTab();
			},
        xq(item){
          this.$router.push({
            path:'/News',
            query:{
              nid:item.id
            }
          })
        },
		// 获取分类
		class(){
			this.axios({
				url:this.$store.state.url + "info/class",
			}).then(res=>{
				// console.log(res);
				this.chenload=true;
				if(res.data.errcode==0||res.data.data.errcode=='0'){
					var data =res.data.data; 
					// console.log(data)
					this.classarr=this.classarr.concat(data);
					this.classid = data[0].id;
				}
			})
		},
		
		changeTab () {
			this.tab0.list = []// 在这里手动置空列表,可显示加载中的请求进度
			this.getTabData(0).mescroll.resetUpScroll() // 刷新列表数据
		},
		getTabData (tabType) {
		  if (tabType == null) tabType = this.tabType;
		  if (tabType === 0) {
		    return this.tab0;
		  }
		},
		mescrollInit0 (mescroll) {
		  this.tab0.mescroll = mescroll;
		},
		getMescrollUp (tabType) {
			// let emptyWarpId = 'dataList0';
		  return {
		    auto: true,
		    callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
		    noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
			 empty: {
			  warpId: 'dataList', // 父布局的id;
			  icon: this.imgSrc, // 图标,默认null
			  tip: '暂时没有找到您所需要的内容…', // 提示
			  
			},
		    
		  }
		},
		upCallback (page, mescroll) {
			var that = this;
			// setTimeout(function(){
			that.axios.get(that.$store.state.url +'info/infoList',{
				params:{
					pid:that.id,
					page:page.num,
					limit:page.size
				},
			}).then(res=>{
				if(res.data.errcode==0||res.data.errcode=='0'){
					var curPageData = res.data.data.lists;
					mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					 if (page.num === 1) this.tab0.list = []; // 如果是第一页需手动制空列表
					 this.tab0.list = this.tab0.list.concat(curPageData); // 追加新数据
			    }else{
					mescroll.endErr()
				}
			})
		},
		
      },
	  
      mounted(){
		  this.sdk.getJSSDK('','',this.$store.state.url);	
        //  精选
	    var that = this;
		// that.mescrollauto();
		// that.relevantInfo(0);
        that.class();
		
		//滚动到固定位置停下
		window.addEventListener('scroll', this.handleScroll);
        
      }
    }
</script>

<style scoped>
	.mescroll {
	  position: fixed;
	  top: .7rem;
	  bottom: 1rem;
	  height: auto;
	}
	.ly-tabbar{
		height: .68rem !important;
		line-height: .68rem !important;
	}
	.ly-tab-list{
		padding: 0 !important;
	}
	.padd{
		/* padding-bottom: 1rem; */
		margin-top: .5rem;
	}
    .top{
      width: 100%;
      height:0.68rem;
			line-height: .68rem;
			position: fixed;
			top: 0;
      background:#fff;
      /* box-shadow:0 0.03rem 0.05rem 0 rgba(71,68,80,0.06); */
      box-sizing:border-box;
			z-index: 9999;
			font-size: .3rem !important;
    }
  /* .blue{
    height: 100%;
    font-size:0.3rem;
    font-weight:bold;
    color:rgba(2,135,255,1);
    line-height: 0.68rem;
    box-sizing:border-box;
    border-bottom: 0.04rem solid rgba(2,135,255,1);
  } */
    .gray{
      font-size: 0.3rem;
      color: #C2C9D3;
      height: 100%;
      line-height: 0.68rem;
    }
    .ya{
      width: 92%;
      margin: auto;
      height: 1.18rem;
      margin-top: 0.3rem;
    }
    .img2{
      width: 2.1rem;
      height: 100%;
      float: left;
      border-radius:0.08rem;
    }
    .ya div{
      height: 100%;
      margin-left: 2.3rem;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
    }
    .ya div p:nth-child(1){
      font-size:0.28rem;
      color:rgba(51,51,51,1);
      line-height:0.32rem;
      width: 4.6rem;
      overflow : hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .img1{
      width: 0.3rem;
      height: 0.3rem;
    }
    .i{
      width: 0.3rem;
      height: 0.3rem;
      margin-left: 0.2rem;
    }
    .p1 span{
      font-size:0.24rem;
      color:rgba(194,201,211,1);
      line-height:0.32rem;
    }
</style>
